<template>
  <div class="login-page">
    <div class="login-box">
      <h4>电商网站后台管理系统</h4>
      <el-input :prefix-icon="UserOutlined" v-model="user.username"></el-input>
      <el-input :prefix-icon="LockOutlined" v-model="user.password"></el-input>
      <el-button type="primary" @click="login()">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
// import {ElMessage} from 'element-plus'
import axios from "../axios";
import { reactive} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const user = reactive({
  username: "admin",
  password: "123456",
});

// 登录
const login = async () => {
  const { data: res } = await axios.post('/login', {
    username: user.username,
    password: user.password,
  });
  console.log(res);
  if (res.meta.status != 200) return ElMessage.error("登录失败");
  ElMessage.success("登录成功");
  window.localStorage.setItem("token", res.data.token);
  window.localStorage.setItem("username",res.data.username)
  router.push("/homes");
};
</script>

<style scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #0087e1;
}

.login-box {
  box-sizing: border-box;
  padding: 20px;
  width: 350px;
  height: 250px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.login-box > h4 {
  text-align: center;
  color: #000;
}

.login-box > .el-input {
  margin-bottom: 15px;
}

.login-box > .el-button {
  width: 100%;
  margin-top: 10px;
}
</style>
